<template>
  <a-layout>
    <Breadcrumb class="iconfont icon-cheliangguanli" msg="车辆管理" />
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '12px ',
        margin: 0,
      }"
    >
      <span class="title">车辆管理</span>
      <div class="operationBar">
        <div class="operationBar-up">
          <div class="operationitem">
            <span class="title1">车牌号</span>
            <a-input v-model:value="plateNumber" placeholder="请输入车牌号" />
          </div>
          <div class="operationitem">
            <span class="title1">车架号</span>
            <a-input v-model:value="frameNumber" placeholder="请输入车架号" />
          </div>
          <div class="operationitem">
            <span class="title1">当前状态</span>
            <a-select v-model:value="condition" style="width: 238px">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="normal">正常</a-select-option>
              <a-select-option value="abnormal">异常</a-select-option>
              <a-select-option value="invalid">已过期</a-select-option>
            </a-select>
          </div>
          <a-button type="primary">
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
        </div>
        <div class="operationBar-button">
          <div class="operationitem">
            <span class="title1">注册场站</span>
            <a-select v-model:value="station" style="width: 238px">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="1">示例场站1</a-select-option>
              <a-select-option value="2">示例场站2</a-select-option>
              <a-select-option value="3">示例场站3</a-select-option>
            </a-select>
          </div>
          <div class="operationitem">
            <span class="title1">合约时间</span>
            <a-range-picker v-model:value="value" :locale="locale" />
          </div>
          <div class="operationitem">
            <span class="title1">合约时长</span>
            <a-select v-model:value="duration" style="width: 238px">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="2">2</a-select-option>
              <a-select-option value="3">3</a-select-option>
            </a-select>
          </div>
          <a-button type="default">
            <template #icon><redo-outlined /></template>
            重置
          </a-button>
        </div>
      </div>
      <!-- 分割线 -->
      <a-divider />
      <div class="operationButtonGroup">
        <div>
          <a-button type="primary">
            <template #icon><plus-outlined /></template>
            新建
          </a-button>
        </div>
        <div class="operationButtonGroupItem">
          <a-button type="primary">
            <template #icon><desktop-outlined /></template>
            查看对应设备
          </a-button>
          <a-button type="primary">
            <template #icon><user-outlined /></template>
            查看绑定账号
          </a-button>
          <a-button type="primary" danger>
            <template #icon><delete-outlined /></template>
            删除
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        style="padding: 10px 0 0 0"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'plateNumber'">
            <span> 车牌号 </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'plateNumber'">
            <a-checkbox v-model:checked="record.checked"
              ><span>
                {{ record.name }}
              </span></a-checkbox
            >
          </template>
          <template v-else-if="column.key === 'frameNumber'">
            <span>
              {{ record.frameNumber }}
            </span>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="
                  tag === '正常'
                    ? 'green'
                    : tag === '异常'
                    ? 'warning'
                    : 'default'
                "
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'electronicContract'">
            <span>
              <a>查看</a>
            </span>
          </template>
          <template v-else-if="column.key === 'operation'">
            <span>
              <a>编辑</a>
              <a-divider type="vertical" />
              <a>更多</a>
            </span>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
</template>

<script>
// @ is an alias to /src
import Breadcrumb from "@/components/Breadcrumb.vue";
import {
  SearchOutlined,
  RedoOutlined,
  PlusOutlined,
  DesktopOutlined,
  UserOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, computed } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
const columns = [
  {
    name: "Name",
    dataIndex: "车牌号",
    key: "plateNumber",
  },
  {
    title: "车架号",
    dataIndex: "车架号",
    key: "frameNumber",
  },

  {
    title: "当前状态",
    key: "tags",
    dataIndex: "tags",
  },
  {
    title: "注册场站",
    dataIndex: "station",
    key: "station",
  },
  {
    title: "电子合约",
    key: "electronicContract",
  },
  {
    title: "合约时间",
    dataIndex: "time",
    key: "time",
  },
  {
    title: "合约总时长",
    dataIndex: "duration",
    key: "duration",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
];
const data = [
  {
    key: "1",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "2",
    name: "津G52318",
    tags: ["异常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "3",
    name: "津G52318",
    tags: ["已过期"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "4",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },

  {
    key: "5",
    name: "津G52318",
    tags: ["异常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "6",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "7",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "8",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "9",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "10",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "11",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
  {
    key: "12",
    name: "津G52318",
    tags: ["正常"],
    frameNumber: "LS5A3ABD7AB158990",
    station: "示例场站",
    electronicContract: "查看",
    time: "2021-02-28  至 2022-02-28",
    duration: "2年",
  },
];
export default defineComponent({
  name: "VehicleManagement",
  components: {
    Breadcrumb,
    SearchOutlined,
    RedoOutlined,
    PlusOutlined,
    DesktopOutlined,
    UserOutlined,
    DeleteOutlined,
  },
  setup() {
    const plateNumber = ref("");
    const condition = ref("全部");
    const frameNumber = ref("");
    const station = ref("全部");
    const value = ref();
    const duration = ref("全部");
    return {
      condition,
      frameNumber,
      plateNumber,
      station,
      locale,
      value,
      duration,
      data,
      columns,
      ipagination: computed(() => ({
        total: 12,
        current: 1,
        pageSize: 8,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        defaultPageSize: 10,
        showQuickJumper: true, // 是否显示跳转窗
      })),
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.ipagination.current = pagination.current;
      this.ipagination.pagesize = pagination.pageSize;
    },
  },
});
</script>
<style>
.operationBar {
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.operationBar .operationBar-up {
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operationBar .operationBar-button {
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operationitem {
  height: 32px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.operationitem .title1 {
  white-space: nowrap;
  padding: 0 10px;
}
.operationButtonGroup {
  padding: 0 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.operationButtonGroup .operationButtonGroupItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 434px;
}
</style>
